<template>
    <div class="login-container">
      <div class="login-box">
        <div class="login-header">
          <img src="../../assets/OIP-C.png" alt="玲珑AI" class="logo">
        </div>
  
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
          <el-form-item prop="username">
            <el-input 
              v-model="loginForm.username"
              :prefix-icon="User"
              placeholder="用户名/邮箱"
            />
          </el-form-item>
  
          <el-form-item prop="password">
            <el-input 
              v-model="loginForm.password"
              :prefix-icon="Lock"
              type="password"
              placeholder="密码"
              show-password
            />
          </el-form-item>
  
          <div class="remember-forgot">
            <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码？</el-link>
          </div>
  
          <el-button type="primary" class="login-button" @click="handleLogin" :loading="loading">
            登录
          </el-button>
  
          <div class="register-link">
            还没有账号？ <el-link type="primary" :underline="false" @click="goToRegister">立即注册</el-link>
          </div>
  
          <!-- <div class="other-login">
            <div class="divider">
              <span>其他登录方式</span>
            </div>
            <div class="social-icons">
              <el-button circle><el-icon><WechatFilled /></el-icon></el-button>
              <el-button circle><el-icon><ChromeFilled /></el-icon></el-button>
              <el-button circle><el-icon><Apple /></el-icon></el-button>
            </div>
          </div> -->
        </el-form>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { User, Lock, ChromeFilled, Apple } from '@element-plus/icons-vue'
  import { useUserStore } from '@/store/modules/user'

  const router = useRouter()
  const loading = ref(false)
  const loginFormRef = ref()
  const userStore = useUserStore()
  const loginForm = reactive({
    username: 'huarun123',
    password: 'huarun123',
    // remember: false
  })
  
  const rules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, message: '用户名长度至少为3个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
    ]
  }
  
  const handleLogin = async () => {
    if (!loginFormRef.value) return
    
    await loginFormRef.value.validate(async (valid) => {
      if (valid) {
        loading.value = true
        try {
          // 这里添加登录API调用
          await userStore.login(loginForm)
          router.push('/')
        } catch (error) {
          ElMessage.error('登录失败，请检查用户名和密码')
        } finally {
          loading.value = false
        }
      }
    })
  }
  
  const goToRegister = () => {
    router.push('/register')
  }
  </script>
  
  <style scoped>
  .login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  }
  
  .login-box {
    width: 400px;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  
  .login-header {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .logo {
    width: 200px;
    object-fit: contain;
    margin-bottom: 16px;
  }
  
  .login-header h1 {
    font-size: 24px;
    color: #333;
    margin: 0;
  }
  
  .login-button {
    width: 100%;
    padding: 12px;
    margin: 20px 0;
  }
  
  .remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
  }
  
  .register-link {
    text-align: center;
    margin: 16px 0;
  }
  
  .other-login {
    margin-top: 30px;
  }
  
  .divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
  }
  
  .divider::before,
  .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #dcdfe6;
  }
  
  .divider span {
    padding: 0 12px;
    color: #909399;
    font-size: 14px;
  }
  
  .social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  
  :deep(.el-input__wrapper) {
    padding: 12px;
  }
  
  :deep(.el-button.is-circle) {
    padding: 8px;
  }
  </style>
  